<template>
  <el-container v-loading="loading" class="container">
    <el-form ref="form" :rules="rules" label-position="left" label-width="120px" :model="form">
      <el-form-item label="模板标题" prop="title">
        <el-input v-model="form.title" placeholder="模板标题" />
      </el-form-item>

      <el-form-item label="模板类型" prop="templateType">
        <el-radio-group v-if="mode === 'add'" v-model="form.templateType">
          <el-radio :label="0">公众号模板消息</el-radio>
          <el-radio :label="2">小程序订阅消息</el-radio>
        </el-radio-group>
        <div v-else>
          <span v-if="form.templateType === 0">公众号模板消息</span>
          <span v-if="form.templateType === 2">小程序订阅消息</span>
          <span v-if="form.templateType === 1">小程序模板消息(已停用)</span>
        </div>
      </el-form-item>

      <el-form-item v-if="form.templateType === 0" label="行业" prop="classList">
        <el-cascader v-model="form.classList" placeholder="请选择行业" :options="mpOptions" />
      </el-form-item>

      <el-form-item v-if="form.templateType !== 2" label="模板ID" prop="templateIdShort">
        <el-input v-model="form.templateIdShort" placeholder="模板库中模板的编号，有TM和OPENTMTM等形式" />
      </el-form-item>

      <el-form-item v-if="form.templateType === 1" label="放大的关键词" prop="emphasisKeyword">
        <el-input v-model="form.emphasisKeyword" placeholder="放大的关键词，可选, 如:keyword1.DATA" />
      </el-form-item>

      <el-form-item v-if="form.templateType === 1 || form.templateType === 0" label="参数配置">
        <mp-msg-keywords-config v-model="form.keywords" />
      </el-form-item>

      <el-form-item v-if="form.templateType === 2" label="场景说明" prop="sceneDesc">
        <el-input v-model="form.sceneDesc" type="text" placeholder="可在此说明模板服务场景， 15字" maxlength="15" />
      </el-form-item>

      <el-form-item v-if="form.templateType === 2" label="消息参数" prop="keywords">
        <el-alert
          v-if="mode === 'edit'"
          style="line-height: 1.2; margin-top: 10px; margin-bottom: 10px"
          title="注意: 增删或者调整顺序, 会导致原用户订阅失效。仅修改模板参数，不影响订阅"
          type="error"
        />

        <div style="margin-bottom: 20px">
          <el-select
            v-model="form.appId"
            style="width: 200px; margin-right: 10px"
            filterable
            allow-create
            default-first-option
            placeholder="请选择appId"
          >
            <el-option
              v-for="item in appList"
              :key="item.appId"
              :label="item.name"
              :value="item.appId"
            />
          </el-select>

          <el-input v-model="form.templateIdShort" style="width: 160px!important;" placeholder="模板ID" />
          <el-button type="primary" size="small" style="margin-left: 10px" @click="handleSyncParam()">配置</el-button>
        </div>
        <wxa-msg-keywords-config
          ref="wxaKwConfig"
          v-model="form.keywords"
          :tid="form.templateIdShort"
          :app-id="form.appId"
        />
      </el-form-item>

      <el-form-item v-if="form.templateType === 2" label="服务类目" prop="categoryId">
        <el-select
          v-model="form.categoryId"
          placeholder="请选择服务目录"
        >
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="form.templateType === 0" label="跳转链接" prop="url">
        <el-input v-model="form.url" placeholder="需要打开h5路径, 非必填" />
      </el-form-item>

      <el-form-item label="小程序页面" prop="pagePath">
        <el-input v-model="form.pagePath" placeholder="跳转小程序的页面路径, 非必填" />
      </el-form-item>

      <el-form-item label="备注" prop="description">
        <el-input v-model="form.description" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
import WxaMsgKeywordsConfig from './WxaMsgKeywordsConfig'
import MpMsgKeywordsConfig from './MpMsgKeywordsConfig'
import { getWxaCategory, getPresetAppList } from '@/api/wxTemplateMsg'
import { mpOptions } from '@/utils/mpTplIndustry'

export default {
  components: {
    WxaMsgKeywordsConfig,
    MpMsgKeywordsConfig
  },
  props: {
    mode: '',
    form: {
      type: Object,
      default() {
        return {
          title: undefined,
          templateIdShort: '',
          appId: '',
          url: '',
          pagePath: '',
          color: '#000000',
          keywords: [],
          classList: ['IT科技', '互联网|电子商务'],
          templateType: 2,
          description: ''
        }
      }
    }
  },
  data() {
    return {
      mpOptions: mpOptions,
      appList: [],
      categoryList: [],
      rules: {
        title: [{
          min: 1,
          max: 30,
          required: true,
          message: '请输入标题, 长度在 1 到 30 个字符',
          trigger: 'blur'
        }
        ],
        templateType: [{
          required: true
        }
        ],
        templateIdShort: [{
          min: 1,
          max: 20,
          required: true,
          message: '请输入模板ID',
          trigger: 'blur'
        }
        ],

        url: [{
          max: 255,
          required: false,
          message: '最大长度255',
          trigger: 'blur'
        }
        ], sceneDesc: [{
          max: 15,
          required: true,
          message: '填写场景说明',
          trigger: 'blur'
        }
        ],
        keywords: [{
          required: true,
          message: '请添加模板参数',
          trigger: 'none'
        }
        ],
        classList: [{
          required: true,
          message: '请选择行业类型',
          trigger: 'blur'
        }
        ],
        pagePath: [{
          max: 255,
          required: false,
          message: '最大长度255',
          trigger: 'blur'
        }]
      },
      loading: false,
      tplKeywordList: [],
      kidList: []
    }
  },
  mounted() {
    getPresetAppList().then(res => {
      console.info('getPresetAppList', res)
      this.appList = res.data
    })
    this.$watch('form.appId', () => {
      this.handleAppIdChange()
    })
  },
  methods: {
    handleCancel() {
      this.$emit('cancel')
    },
    handleSyncParam() {
      if (!this.form.templateIdShort) {
        this.$message.error('请填写tid')
        return
      }
      if (!this.form.appId) {
        this.$message.error('请填写来源appId')
        return
      }
      this.$refs.wxaKwConfig.handleConfig()
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const data = this.form
          if (data.templateType === 2 && data.categoryId && this.categoryList) {
            const t = this.categoryList.filter(item => item.id === this.form.categoryId)
            if (t.length !== 0) {
              data.classList = ['', t[0].name]
            }
          }
          this.$emit('submit', data)
        } else {
          this.$message.error('请按要求填写好表格.')
        }
      })
    },
    handleAppIdChange() {
      if (this.form.appId) {
        getWxaCategory({ appId: this.form.appId }).then(res => {
          this.categoryList = res.data
          if (this.categoryList.length > 0) {
            const t = this.categoryList.filter(item => item.id === this.form.categoryId)
            if (t.length === 0) {
              this.form.categoryId = this.categoryList[0].id
            }
          } else {
            this.form.categoryId = null
          }
        }).catch(() => {
          this.categoryList = []
          this.form.categoryId = null
        })
      } else {
        this.categoryList = []
        this.form.categoryId = null
      }
    }
  }
}
</script>

<style scoped>

.container >>> .el-table--small th {
  padding: 0 !important;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped="">
	::v-deep .el-radio__input.is-checked .el-radio__inner{
		background-color: $btnBgc;
		border-color: $btnBgc;
	}
	::v-deep .el-radio__input.is-checked + .el-radio__label{
		color: $btnBgc;
	}
	::v-deep .el-input__inner:focus{
		border-color: $btnBgc;
	}
	::v-deep .el-select .el-input.is-focus .el-input__inner{
		border-color: $btnBgc;
	}
	::v-deep .el-textarea__inner:focus{
		border-color: $btnBgc;
	}	 
	.el-button--primary{
		background-color: $btnBgc;
		border-color: $btnBgc;
	}
	.el-button--primary:hover{
		opacity: 0.5;
	}
	.el-button + .el-button:hover{
		background-color: $btnBgc;
		border-color: $btnBgc;
		color: white;
	}
	::v-deep .el-button--small{
		background-color: $btnBgc;
		border-color: $btnBgc;
	}
	::v-deep .el-button--small:hover{
		opacity: 0.5;
	}
	
	.el-select-dropdown__item.selected{
		color: $btnBgc;
		background-color: $overBgc;
	}
</style>
